<template>
	<view class="message">
		<view class="message_left">
			<view class="message_left_header">
				<rui-icons icon="ai" size="44" color="var(--color)"></rui-icons>
				<view class="message_left_header_name">
					旅游助手
				</view>
			</view>
			<view class="message_left_content">
				<view class="message_left_content_msg">
					{{data.msg}}
				</view>
				<view class="message_left_content_idcard" v-for="(item, index) in data?.data?.list" :key="index">
					<view class="message_left_content_idcard_item">
						<view class="message_left_content_idcard_item_lable">身份证号</view>
						<view class="message_left_content_idcard_item_value">
							{{item.idcard}}
						</view>
					</view>
					<view class="message_left_content_idcard_item">
						<view class="message_left_content_idcard_item_lable">所在地区</view>
						<view class="message_left_content_idcard_item_value">
							{{item.province}}-{{item.city}}-{{item.area}}
						</view>
					</view>
					<view class="message_left_content_idcard_item">
						<view class="message_left_content_idcard_item_lable">性别年龄</view>
						<view class="message_left_content_idcard_item_value">
							{{item.sex}} / {{item.age ? item.age+'岁':'年龄异常'}}
						</view>
					</view>
				</view>
				<view class="message_left_content_footer">
					<view class="message_left_content_footer_left">
						搜索结果
					</view>
					<view class="message_left_content_footer_right">
						<view class="message_left_content_footer_right_item" @click="copy">
							<rui-icons icon="copy" size="36"></rui-icons>
						</view>
						<view class="message_left_content_footer_right_item">
							<rui-icons icon="collect" size="36"></rui-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script setup>
	let props = defineProps({
		data: Object
	})
	
	const copy = () => {
		uni.setClipboardData({
			data: props.data?.data?.idcard || '',
			success: function () {
				uni.showToast({
					title: "复制成功"
				})
			}
		});
	}
</script>

<style lang="scss">
	.message {
		margin: 50rpx 20rpx;

		&_left{
			&_header {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
			
				&_name {
					font-size: 34rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}
			
			&_content {
				background: #fff;
				padding: 30rpx;
				border-radius: 0 10rpx 30rpx 30rpx;
				line-height: 50rpx;
			
				&_footer {
					margin-top: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&_left{
						font-size: 22rpx;
						background: #eee;
						padding: 0 15rpx;
						border-radius: 30rpx;
						color: #666;
						height: 40rpx;
						line-height: 40rpx;
					}
					&_right {
						display: flex;
						&_item{
							font-size: 24rpx;
							display: flex;
							align-items: center;
							margin: 0 20rpx;
						}
					}
				}
			
				&_idcard {
					margin-top: 30rpx;
			
					&_item {
						display: flex;
						line-height: 50rpx;
			
						&_lable {
							color: #999;
							margin-right: 15rpx;
			
							&::after {
								content: ":";
							}
						}
					}
				}
			}
		}
	}
</style>